<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        html,body{
            position: relative;
        }
        #app{
            position: absolute;
            left: 30%;
        }
        img{
            width: 700px;
            height: 400px;
        }
        #left{
            position: absolute;
            top: 45%;
            left: -13%;
            width: 75px;
            height: 75px;
        }

        #right{
            position: absolute;
            top: 45%;
            width: 75px;
            height: 75px;
        }
        
    </style>

    <title>Document</title>
</head>
<body>

    <div id="app">
        <img src="./left.png" id="left" v-on:click="left">
        <img v-bind:src="imgUrl">
        <img src="./right.png" id="right" v-on:click="right">
        
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                imgUrl:"./1.png",
                imgs:["./1.png","./2.png","./3.png","./4.png"],
                index:0
            },
            mounted(){
                setInterval(()=>{
                    if(this.index > 3){
                        this.index = 0
                    }
                    this.imgUrl = this.imgs[this.index];
                    this.index++
                },1000)
            },
            methods:{
                left(){
                    if(this.index > 0 ){     
                        this.index--;
                    }else{
                        this.index = 3
                    }
                    this.imgUrl=this.imgs[this.index]
                },
                right(){
                    if(this.index < 3 ){
                        this.index++;
                    }else {
                        this.index = 0
                    }
                    this.imgUrl=this.imgs[this.index]
                }
            }
            
        })
    </script>
    
</body>
</html>